<script setup>
import { reactive, ref } from 'vue';
import Detail from './detail1.vue';
const { setPersonal } = store.usePersonal();
const router = useRouter();
const detail = ref();
const form = reactive({ code: '', password: '' });
const login = async () => {
  // setPersonal({...form});
  // router.push("/");
  detail.value.show();
}
</script>

<template>
  <div class="container">
    <div class="main">
      <div class="title">
        智慧电影管理系统
      </div>
      <el-form :label-position="right" label-width="90px">
        <el-form-item label="工号：" class="label">
          <el-input v-model="form.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码：" class="label">
          <el-input v-model="form.password" autocomplete="off" show-password></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="detail.show()" class="button">登录</el-button>
      <div class="info">@2021 千锋教育</div>
    </div>
    <Detail name="方运江" ref="detail" />
  </div>
</template>

<style lang='less' scoped>
.container {
  flex: 1;
  background-image: url("@/img/login/login_back.webp");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.main {
  width: 600px;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 100px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.title {
  font-size: 30px;
  color: white;
  margin-bottom: 60px;
}
.label > :global(.el-form-item__label) {
  color: white;
}
.button {
  width: 120px;
  margin-left: 10px;
}
.info {
  font-size: 14px;
  color: white;
  margin-top: 60px;
}
</style>
